<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>热门景点</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			a {
				text-decoration: none;
			}
			.center {
				width: 1000px;
				margin: 0 auto;
			}
			body {
				background-color: #2B95D3;
				background-image: url(img/bg.jpg);
				background-repeat: no-repeat;
				background-size: auto 100%;
				background-position: 0 100px;
			}
			/******************搜索区********************/
			.search .main {
				background-color: #fff;
				padding: 5px 10px;
				margin: 5px 0;
				color: #2F2F2F;
			}
			.search .season,.search .area {
				display: flex;
				margin: 10px;
			}
			.search .season span,.search .area span {
				width: 100px;
				font-size: 14px;
			}
			.search .season a,.search .area a {
				width: 100px;
				color: #2F2F2F;
				font-size: 14px;
			}
			.nav+.center .txt {
				color: #fff;
				padding: 8px 0;
				font-size: 14px;
			} 
			/**********************风景展示区**************************/
			.scenery .main {
				background-color: #fff;
			}
			.scenery .main ul {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
				align-content: space-evenly;
			}
			.scenery .main ul li {
				position: relative;
				width: 48%;
				color: #fff;
				font-size: 20px;
				margin: 10px 0;
			}
			.scenery .main ul li img {
				display: block;
				width: 100%;
				height: 100%;
			}
			.scenery .main ul li p {
				position: absolute;
				z-index: 1;
				bottom: 5px;
				left: 5px;
				
			}
			.scenery .main ul li span {
				position: absolute;
				z-index: 1;
				right: 5px;
				bottom: 5px;
			}
			/***************页码展示区*****************/
			.page ul {
				display: flex;
				justify-content: flex-end;
				margin-top: 50px;
			}
			.page ul li {
				height: 30px;
				text-align: center;
				line-height: 30px;
				border: 1px solid #2B95D3;
				background-color: #fff;
				color: #999;
				padding: 0 10px;
			}
			.page ul li:first-child {
				border-radius: 5px 0 0 5px;
			}
			.page ul li:last-child {
				border-radius: 0 5px 5px 0;
			}
			/********************页尾*********************/
			.foot {
				background-color: rgba(0, 0, 0,.6 );
			}
			.foot .main {
				display: flex;
				justify-content: space-between;
				color: #fff;
				padding: 30px 0;
				height: 130px;
				margin-top: 150px;
			}
			.foot .main .box1 p {
				margin: 10px 0;
			}
			.foot .main .box1 a {
				color: #fff;
				font-size: 14px;
			}
			.foot .main .box2 img {
				width: 50px;
				height: 50px;
				vertical-align: middle;
			}
			.foot .main .box3 {
				display: flex;
			}
			.foot .main .box3>div {
				margin: 0 5px;
			}
			.foot .main .box3 p {
				text-align: center;
				font-size: 12px;
				
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<iframe src="nav.html" frameborder="0" width="100%" height="100px" scrolling="no"></iframe>
		</div>
			<div class="center">
				<div class="txt">当前位置</div>
			</div>
		<div class="search">
			<div class="center">
				<div class="main">
					<div class="season">
						<span>季节：</span>
						<a href="#">不限</a>
						<a href="#">春季游</a>
						<a href="#">夏季游</a>
						<a href="#">秋季游</a>
						<a href="#">冬季游</a>
					</div>
					<div class="area">
						<span>区域：</span>
						<a href="#">不限</a>
						<a href="#">定海区</a>
						<a href="#">普陀区</a>
						<a href="#">嵊泗县</a>
						<a href="#">朱家尖</a>
					</div>
				</div>
			</div>
		</div>
		<div class="scenery">
			<div class="center">
				<div class="main">
					<ul>
						<li>
							<a href="scenery_show.html">
								<img src="img/scenery/1.jpg">
							</a>
							<p>普陀山风景名胜区</p>
							<span>￥160起</span>
						</li>
						<li>
							<a href="#">
								<img src="img/scenery/2.jpg">
							</a>
							<p>朱家尖国际沙雕艺术广场</p>
							<span>￥140起</span>
						</li>
						<li>
							<a href="#">
								<img src="img/scenery/3.jpg">
							</a>
							<p>朱家尖大青山国家公园</p>
							<span>￥100起</span>
						</li>
						<li>
							<a href="#">
								<img src="img/scenery/4.jpg">
							</a>
							<p>朱家尖乌石塘景区</p>
							<span>￥160起</span>
						</li>
						<li>
							<a href="#">
								<img src="img/scenery/5.jpg">
							</a>
							<p>普陀山风景名胜区</p>
							<span>￥160起</span>
						</li>
						<li>
							<a href="#">
								<img src="img/scenery/6.jpg">
							</a>
							<p>普陀山风景名胜区</p>
							<span>￥160起</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="page">
			<div class="center">
				<div>
					<ul>
						<li>首页</li>
						<li>上一页</li>
						<li><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li>下一页</li>
						<li>尾页</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="foot">
			<div class="center">
				<div class="main">
					<div class="box1">
						<p>友情链接</p>
						<div>
							<a href="http://www.zhujiajian.com/">朱家尖旅游网</a>
							<a href="https://www.ctrip.com/">携程旅游网</a>
							<a href="https://www.tuniu.com/">途牛旅游网</a>
						</div>
					</div>
					<div class="box2">
						<img src="img/icon1.png">
						<span>旅游咨询投诉热线：12345</span>
					</div>
					<div class="box3">
						<div>
							<img src="img/weibo.png">
							<p>官方微博</p>
						</div>
						<div>
							<img src="img/weixin.png">
							<p>官方微信</p>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</body>
</html>